<template>
  <div class="sc-design-sm">
    <q-card
      border-radius
      q-card--flat
      shadow
      class="my-card"
      style="margin: 0 12px 12px"
    >
      <q-card-section>
        <div class="col-sm-2 col-xs-12 q-pb-sm" style="
    background-color: #fff;
    padding: 50px 100px;
    margin:0
">
          <q-tabs
            v-model="settingsTab"
            align="left"
            active-color="primary"
            active-bg-color="blue-1"
            class="text-grey-10"
          >
            <q-tab
              name="basicSettings"
              label="基本设置"
              style="justify-content: left"
              content-class="q-pl-md"
            />
            <q-tab
              name="profileSettings"
              label="公司简介"
              style="justify-content: left"
              content-class="q-pl-md"
            />
            <q-tab
              name="businessimgSettings"
              label="营业执照"
              style="justify-content: left"
              content-class="q-pl-md"
            />
            <q-tab
              name="safeSettings"
              label="门店图设置"
              style="justify-content: left"
              content-class="q-pl-md"
            />
            <q-tab
              name="accountBind"
              label="广告图设置"
              style="justify-content: left"
              content-class="q-pl-md"
            />

            <q-tab
              name="wechatcode"
              label="公众号"
              style="justify-content: left"
              content-class="q-pl-md"
            />
          </q-tabs>
        </div>
        <!-- <q-separator :vertical="$q.screen.gt.xs" v-show="$q.screen.gt.xs" /> -->
        <div class="col-sm col-xs-12  q-pt-none">
          <q-tab-panels
            v-model="settingsTab"
            animated
            transition-prev="fade"
            transition-next="fade"
            style="min-height: 400px"
          >
            <q-tab-panel name="basicSettings" class="row q-pt-sm">
              <div class="boxc" style="background-color:#fff">
                <div class="text-h5 col-12 q-mb-md title_name">基本设置</div>
                <div class="col-xs-12 q-mb-md" v-if="$q.screen.lt.sm"></div>
                <div
                  class="col-md-4 col-sm-5 col-xs-12 q-gutter-y-md q-pt-md q-pl-md q-pb-md inputwidth"
                >
                  <q-input
                    outlined
                    dense
                    square
                    v-model="userBasicData.company"
                  >
                    <template v-slot:before>
                      <div class="text_name">公司名称</div>
                    </template>
                  </q-input>

                  <q-input outlined dense square v-model="userBasicData.tel">
                    <template v-slot:before>
                      <div class="text_name">公司电话</div>
                    </template>
                  </q-input>

                  <q-input outlined dense square v-model="userBasicData.qq">
                    <template v-slot:before>
                      <div class="text_name">Q Q</div>
                    </template>
                  </q-input>

                  <q-select
                    outlined
                    dense
                    square
                    behavior="menu"
                    use-input
                    input-debounce="0"
                    @filter="filterProvinces"
                    v-on:keydown.delete="deleteProvince"
                    options-dense
                    :options="provinces"
                    v-model="userBasicData.provinceData"
                    @input="changeProvince"
                  >
                    <template v-slot:before>
                      <div class="text_name">所在省份</div>
                    </template>
                  </q-select>

                  <q-select
                    outlined
                    dense
                    square
                    behavior="menu"
                    use-input
                    input-debounce="0"
                    @filter="filterCities"
                    v-on:keydown.delete="deleteCity"
                    options-dense
                    :options="cities"
                    v-model="userBasicData.cityData"
                    @input="changeCity"
                  >
                    <template v-slot:before>
                      <div class="text_name">所在城市</div>
                    </template>
                  </q-select>
                  <!-- <div>所在县区</div>
                <q-select
                  outlined
                  dense
                  square
                  behavior="menu"
                  use-input
                  input-debounce="0"
                  @filter="filterCounties"
                  v-on:keydown.delete="deleteCounty"
                  options-dense
                  :options="counties"
                  v-model="userBasicData.countyData"
                  v-if="countiesCache && countiesCache.length"
                /> -->
                  <q-input
                    outlined
                    dense
                    square
                    v-model="userBasicData.address"
                  >
                    <template v-slot:before>
                      <div class="text_name">公司地址</div>
                    </template>
                  </q-input>
                  <q-input
                    outlined
                    dense
                    square
                    type="textarea"
                    v-model="userBasicData.business"
                    maxlength="255"
                  >
                    <template v-slot:before>
                      <div class="text_name">公司主营</div>
                    </template>
                  </q-input>
                  <div class="gxbtn">
                    <q-btn
                      label="更新基本信息"
                      color="primary"
                      unelevated
                      @click="updateUserBaseInfo"
                      :loading="basicLoading"
                    >
                      <template v-slot:loading>
                        <q-spinner-ios class="on-left" />
                        更新
                      </template>
                    </q-btn>
                  </div>
                </div>
              </div>

              <div class="flexs" style="
    background-color: #f5f5f5;
">
                <div
                  class="col-md-8 col-sm-7 flexs"
                  v-if="$q.screen.gt.xs"
                  style="align-items: center;background-color: #fff;"
                >
                  <div>
                    <span class="text-center block q-mb-md">
                      <q-avatar size="198px">
                        <img
                          alt=""
                          :src="appImg.logo"
                          class="cursor-pointer"
                          style="border: 1px solid #eee max-width: 198px"
                        />
                      </q-avatar>
                    </span>
                    <span class="text-center block q-mb-md">
                      <input
                        type="file"
                        style="display: none"
                        class="logoFile"
                        accept="image/*"
                        @change="handleFile_logo"
                      />
                      <q-btn
                        unelevated
                        color="primary"
                        label="更换Logo"
                        icon="unarchive"
                        @click="LogoFileUpload"
                      />
                    </span>
                  </div>
                  <div>
                    <span class="text-center block q-mb-md">
                      <img
                        alt=""
                        :src="appImg.appimg"
                        class="cursor-pointer"
                        style="border: 1px solid #eee; max-width: 198px"
                      />
                    </span>
                    <span class="text-center block">
                      <input
                        type="file"
                        style="display: none"
                        class="appimgFile"
                        accept="image/*"
                        @change="handleFile_appimg"
                      />
                      <q-btn
                        unelevated
                        color="primary"
                        label="小程序分享码"
                        icon="unarchive"
                        @click="AppImgFileUpload"
                      />
                    </span>
                  </div>
                </div>
              </div>
            </q-tab-panel>
            <q-tab-panel name="profileSettings" class="q-pt-sm row boxc">
              <div class="text-h5 col-12 row q-mb-md title_name inputwidth">
                公司简介
              </div>
              <div class="text-h5 col-12 row inputwidth column">
                <div class="q-pa-md q-gutter-sm" style="padding-left: 0px">
                  <input
                    type="file"
                    style="display: none"
                    class="editorFile"
                    accept="image/*"
                    @change="handleFile_editor"
                  />
                  <q-editor
                    v-model="qeditor"
                    :dense="$q.screen.lt.md"
                    :definitions="{
                      upload: {
                        tip: '上传图片',
                        icon: 'cloud_upload',
                        label: '上传',
                        handler: uploadIt
                      }
                    }"
                    :toolbar="[
                      [
                        {
                          label: '排列',
                          icon: $q.iconSet.editor.align,
                          fixedLabel: true,
                          list: 'only-icons',
                          options: ['left', 'center', 'right', 'justify']
                        }
                      ],

                      [
                        'bold',
                        'italic',
                        'strike',
                        'underline',
                        'subscript',
                        'superscript'
                      ],
                      ['token', 'hr', 'link', 'custom_btn'],
                      ['print', 'fullscreen'],
                      [
                        {
                          label: $q.lang.editor.formatting,
                          icon: $q.iconSet.editor.formatting,
                          list: 'no-icons',
                          options: [
                            'p',
                            'h1',
                            'h2',
                            'h3',
                            'h4',
                            'h5',
                            'h6',
                            'code'
                          ]
                        },
                        {
                          label: ' 字体大小',
                          icon: $q.iconSet.editor.fontSize,
                          fixedLabel: true,
                          fixedIcon: true,
                          list: 'no-icons',
                          options: [
                            'size-1',
                            'size-2',
                            'size-3',
                            'size-4',
                            'size-5',
                            'size-6',
                            'size-7'
                          ]
                        },
                        {
                          label: '默认字体',
                          icon: $q.iconSet.editor.font,
                          fixedIcon: true,
                          list: 'no-icons',
                          options: [
                            'default_font',
                            'arial',
                            'arial_black',
                            'comic_sans',
                            'courier_new',
                            'impact',
                            'lucida_grande',
                            'times_new_roman',
                            'verdana'
                          ]
                        },
                        'removeFormat'
                      ],
                      ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
                      ['upload'],
                      ['undo', 'redo'],
                      ['viewsource']
                    ]"
                    :fonts="{
                      arial: 'Arial',
                      arial_black: 'Arial Black',
                      comic_sans: 'Comic Sans MS',
                      courier_new: 'Courier New',
                      impact: 'Impact',
                      lucida_grande: 'Lucida Grande',
                      times_new_roman: 'Times New Roman',
                      verdana: 'Verdana'
                    }"
                  />
                </div>
                <div class="gxbtn">
                  <q-btn
                    label="保存"
                    color="primary"
                    unelevated
                    @click="UpdateCardInfobody"
                    :loading="basicLoading"
                    style="width: 100px"
                  >
                    <template v-slot:loading>
                      <q-spinner-ios class="on-left" />
                      更新
                    </template>
                  </q-btn>
                </div>
              </div>
            </q-tab-panel>
            <q-tab-panel name="businessimgSettings" class="q-pt-sm row boxc bg-white">
              <div class="text-h5 col-12 row q-mb-md title_name inputwidth">
                公司营业执照
              </div>

              <div class="col-md-8 col-sm-8 col-8">
                <div class="q-pa-md">
                  <div class="q-col-gutter-md row items-start">
                    <div class="col-12 text-center" style="padding-left: 0">
                      <q-img
                        :src="appImg.businessimg"
                        style="width: 300px; max-width: 300px"
                        img-class="my-custom-image"
                        class="rounded-borders"
                      >
                      </q-img>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text-h5 col-12 row inputwidth">
                <span class="block">
                  <input
                    type="file"
                    style="display: none"
                    class="businessimgFile"
                    accept="image/*"
                    @change="handleFile_businessimg"
                  />
                  <q-btn
                    unelevated
                    color="primary"
                    label="上传营业执照"
                    icon="unarchive"
                    @click="BusinessimgFileUpload"
                  />
                </span>
              </div>
            </q-tab-panel>
            <q-tab-panel name="safeSettings" class="q-pt-sm row boxc">
              <div class="text-h5 col-12 row q-mb-md title_name inputwidth">
                公司门店图
              </div>

              <div class="col-md-8 col-sm-8 col-8">
                <div class="q-pa-md">
                  <div class="q-col-gutter-md row items-start">
                    <div
                      class="col-4"
                      v-for="(item, index) in mdfileList"
                      :key="index"
                    >
                      <q-img
                        :src="item"
                        style="height: 170px; max-width: 300px"
                        img-class="my-custom-image"
                        class="rounded-borders"
                      >
                        <div
                          class="absolute-bottom text-subtitle1 text-center"
                          @click="delete_mdimg(item)"
                          style="padding: 2px; cursor: pointer"
                        >
                          <q-icon name="fa fa-trash " style="font-size: 16px" />
                        </div>
                      </q-img>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="text-h5 col-12 row"
                style="flex-direction: column; align-items: center"
              >
                <div
                  slot="tip"
                  class="el-upload__tip"
                  style="font-size: 12px; color: #606266"
                >
                  只能上传jpg/png文件，最多允许添加3张图片，建议图片比例：<span
                    >900*400</span
                  >
                </div>
                <span class="block">
                  <input
                    type="file"
                    style="display: none"
                    class="mdFile"
                    accept="image/*"
                    @change="handleFile_md"
                  />
                  <q-btn
                    unelevated
                    color="primary"
                    label="点击上传"
                    icon="unarchive"
                    @click="MdFileUpload"
                  />
                </span>
              </div>
            </q-tab-panel>
            <q-tab-panel name="accountBind" class="q-pt-sm row boxc bg-white">
              <div class="text-h5 col-12 row q-mb-md title_name inputwidth">
                设置广告图
              </div>

              <div class="col-md-8 col-sm-8 col-8">
                <div class="q-pa-md">
                  <div
                    class="q-col-gutter-md row items-start text-center"
                    style="justify-content: center"
                  >
                    <div
                      class="col-4"
                      v-for="(item, index) in advfileList"
                      :key="index"
                    >
                      <q-img
                        :src="item"
                        style="height: 170px; max-width: 300px"
                        img-class="my-custom-image"
                        class="rounded-borders"
                      >
                        <div
                          class="absolute-bottom text-subtitle1 text-center"
                          @click="delete_advimg(item)"
                          style="padding: 2px; cursor: pointer"
                        >
                          <q-icon name="fa fa-trash " style="font-size: 16px" />
                        </div>
                      </q-img>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="text-h5 col-12 row"
                style="flex-direction: column; align-items: center"
              >
                <div
                  slot="tip"
                  class="el-upload__tip"
                  style="font-size: 12px; color: #606266"
                >
                  只能上传jpg/png文件，最多允许添加3张图片，建议图片比例：<span
                    >900*400</span
                  >
                </div>
                <span class="block">
                  <input
                    type="file"
                    style="display: none"
                    class="advFile"
                    accept="image/*"
                    @change="handleFile_advimg"
                  />
                  <q-btn
                    unelevated
                    color="primary"
                    label="点击上传"
                    icon="unarchive"
                    @click="AdvimgUpload"
                  />
                </span>
              </div>
            </q-tab-panel>
            <q-tab-panel name="wechatcode">
              <div class="text-h5 col-12 title_name">公众号二维码</div>

              <div
                class="text-h5 col-12 row q-mb-md"
                style="display: flex; justify-content: center"
              >
                <div
                  slot="tip"
                  class="el-upload__tip inputwidth text-center"
                  style="font-size: 16px; color: #2196f3"
                >
                  微信扫一扫分享
                </div>
              </div>
              <div class="col-md-8 col-sm-7" v-if="$q.screen.gt.xs">
                <span class="text-center block q-mb-md">
                  <img
                    alt=""
                    :src="wechatcode"
                    class="cursor-pointer"
                    style="border: 1px solid #eee"
                  />
                </span>
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </q-card-section>
    </q-card>
    <q-dialog
      v-model="userUpdatePasswordData.config.updatePasswordDialog"
      persistent
      @before-hide="beforeHidePasswordDialog"
    >
      <q-card
        class="q-px-md q-pb-md q-pt-sm sc-design"
        style="width: 500px; max-width: 80vw"
      >
        <q-card-section>
          <div class="text-h6">修改密码</div>
        </q-card-section>
        <q-form
          @submit="updatePassword"
          @reset="onResetUpdatePassword"
          ref="registerForm"
        >
          <q-item-label class="q-gutter-y-sm q-px-md">
            <q-input
              outlined
              clearable
              clear-icon="cancel"
              :type="
                userUpdatePasswordData.config.isOldPassword
                  ? 'password'
                  : 'text'
              "
              v-model="userUpdatePasswordData.data.oldPassword"
              dense
              debounce="1000"
              placeholder="原密码"
              maxlength="32"
              square
              :rules="[(val) => (val && val.length > 0) || '请输入密码']"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="
                    userUpdatePasswordData.config.isOldPassword
                      ? 'visibility_off'
                      : 'visibility'
                  "
                  class="cursor-pointer"
                  @click="
                    userUpdatePasswordData.config.isOldPassword = !userUpdatePasswordData
                      .config.isOldPassword
                  "
                />
              </template>
            </q-input>
            <q-input
              outlined
              clearable
              clear-icon="cancel"
              :type="
                userUpdatePasswordData.config.isNewPassword
                  ? 'password'
                  : 'text'
              "
              v-model="userUpdatePasswordData.data.newPassword"
              dense
              debounce="1000"
              placeholder="新密码"
              maxlength="32"
              square
              :rules="[
                (val) => (val && val.length > 0) || '请输入新密码',
                (val) => (val && val.length >= 6) || '密码长度必须大于等于6位'
              ]"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="
                    userUpdatePasswordData.config.isNewPassword
                      ? 'visibility_off'
                      : 'visibility'
                  "
                  class="cursor-pointer"
                  @click="
                    userUpdatePasswordData.config.isNewPassword = !userUpdatePasswordData
                      .config.isNewPassword
                  "
                />
              </template>
            </q-input>
            <q-input
              outlined
              clearable
              clear-icon="cancel"
              :type="
                userUpdatePasswordData.config.isNewConfirmPassword
                  ? 'password'
                  : 'text'
              "
              v-model="userUpdatePasswordData.data.newConfirmPassword"
              dense
              debounce="1000"
              placeholder="新确认密码"
              maxlength="32"
              square
              :rules="[
                (val) => (val && val.length > 0) || '请输入确认新密码',
                (val) => passwordValida || '两次密码不一致'
              ]"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="
                    userUpdatePasswordData.config.isNewConfirmPassword
                      ? 'visibility_off'
                      : 'visibility'
                  "
                  class="cursor-pointer"
                  @click="
                    userUpdatePasswordData.config.isNewConfirmPassword = !userUpdatePasswordData
                      .config.isNewConfirmPassword
                  "
                />
              </template>
            </q-input>
          </q-item-label>
          <q-card-actions align="right" class="q-mb-sm q-mr-sm">
            <q-btn
              label="确认"
              unelevated
              color="primary"
              type="submit"
              style="width: 64px"
            />
            <q-btn
              label="取消"
              unelevated
              color="primary"
              v-close-popup
              style="width: 64px"
            />
          </q-card-actions>
        </q-form>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import ACCOUNT_SETTINGS_DATA from '@/mock/data/account/settingsData'
import { getLoginData } from '@/utils/localStorage'
import {
  toOauthLogin,
  updateUser,
  currentUser,
  uploadHeadImg,
  updateCurrentPassword
} from '@/api/user'
import {
  listForCity,
  listForCounty,
  listForProvince,
  getlistForProvince,
  getCityList,
  getDistrictList
} from '@/api/chinaCity'
import { listThirdOauthUser, updateThirdOauthUser } from '@/api/thirdOauthUser'
import commonUtil from '@/utils/commonUtil'
import {
  iwebApi,
  uploadImg,
  weChat,
  delmdimgApi,
  getAppImg,
  deladvimgApi,
  updataCardInfo,
  UpdataCardInfo_body
} from '@/api/cardApi'
import { colors } from 'quasar'

//import { quillEditor, Quill } from 'vue-quill-editor'
// import '../quill/dist/quill.core.css'
// import '../quill/dist/quill.snow.css'
// import '../quill/dist/quill.bubble.css'

const safeData = {
  phone: null,
  email: null
}

export default {
  name: 'Settings',
  data() {
    return {
      cardInfo: {},
      appImg: {},
      wechatcode: null,
      accountSettingsData: ACCOUNT_SETTINGS_DATA,
      settingsTab: 'basicSettings',
      userBasicData: ACCOUNT_SETTINGS_DATA.basicSetting,
      userBindData: ACCOUNT_SETTINGS_DATA.accountBindData,
      userUpdatePasswordData: ACCOUNT_SETTINGS_DATA.userUpdatePasswordData,
      safeData,
      loginUser: {},
      provinces: [],
      cities: [],
      counties: [],
      provincesCache: [],
      citiesCache: [],
      countiesCache: [],
      basicLoading: false,
      headFile: null,
      Province: [],
      mdfileList: [],
      advfileList: [],
      httpimgUrl: 'http://img.inheart.cn',
      showmd: 0,
      content: '',
      editorOption: {},
      qeditor: ''
    }
  },
  methods: {
    //文本编辑器上传图片
    uploadIt() {
      this.EditorFileUpload()
    },
    onResetUpdatePassword() {
      this.userUpdatePasswordData.data = commonUtil.resetObj(
        this.userUpdatePasswordData.data
      )
    },
    beforeHidePasswordDialog() {
      this.onResetUpdatePassword()
    },
    popUpdatePasswordDialog() {
      this.userUpdatePasswordData.config.updatePasswordDialog = true
    },
    updatePassword() {
      updateCurrentPassword(this.userUpdatePasswordData.data).then((result) => {
        this.userUpdatePasswordData.config.updatePasswordDialog = false
        commonUtil.notifySuccess('修改成功')
      })
    },
    popFileUpload() {
      document.getElementsByClassName('headFile')[0].click()
    },

    LogoFileUpload() {
      document.getElementsByClassName('logoFile')[0].click()
    },

    AppImgFileUpload() {
      document.getElementsByClassName('appimgFile')[0].click()
    },
    AdvimgUpload() {
      document.getElementsByClassName('advFile')[0].click()
    },

    MdFileUpload() {
      document.getElementsByClassName('mdFile')[0].click()
    },
    BusinessimgFileUpload() {
      document.getElementsByClassName('businessimgFile')[0].click()
    },
    EditorFileUpload() {
      document.getElementsByClassName('editorFile')[0].click()
    },

    // 将头像显示
    handleFile: function (e) {
      const $target = e.target
      const file = $target.files[0]
      const reader = new FileReader()
      reader.onload = (data) => {
        const res = data.target
        this.userBasicData.avatar = res.result
      }
      reader.readAsDataURL(file)
      this.headFile = file
    },
    //上传logo
    handleFile_logo: function (e) {
      const $target = e.target
      const file = $target.files[0]
      const reader = new FileReader()
      // reader.onload = (data) => {
      //   const res = data.target
      //   this.userBasicData.avatar = res.result
      // }
      reader.readAsDataURL(file)
      this.headFile = file
      const formData = new FormData()
      formData.append('file', this.headFile)
      formData.append('guestcode', this.userInfo.reguserno)
      formData.append('gscode', this.userInfo.Gscode)
      formData.append('imgtype', 'logo')

      e.target.value = ''
      uploadImg(formData).then((res) => {
        if (res.status == '200') {
          commonUtil.notifySuccess('上传成功')
          let url = res.status
          let urlImg = res.statusText
          this.appImg.logo = this.httpimgUrl + urlImg + '&original=1'
        }
      })
    },
    //上传小程序二维码
    handleFile_appimg: function (e) {
      const $target = e.target
      const file = $target.files[0]
      const reader = new FileReader()
      // reader.onload = (data) => {
      //   const res = data.target
      //   this.userBasicData.avatar = res.result
      // }
      reader.readAsDataURL(file)
      this.headFile = file
      const formData = new FormData()
      formData.append('file', this.headFile)
      formData.append('guestcode', this.userInfo.reguserno)
      formData.append('gscode', this.userInfo.Gscode)
      formData.append('imgtype', 'appimg')

      e.target.value = ''
      uploadImg(formData).then((res) => {
        if (res.status == '200') {
          commonUtil.notifySuccess('上传成功')
          let url = res.status
          let urlImg = res.statusText
          this.appImg.appimg = this.httpimgUrl + urlImg + '&original=1'
        }
      })
    },

    // 上传营业执照
    handleFile_businessimg: function (e) {
      const $target = e.target
      const file = $target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      this.headFile = file
      const formData = new FormData()
      formData.append('file', this.headFile)
      formData.append('guestcode', this.userInfo.reguserno)
      formData.append('gscode', this.userInfo.Gscode)
      formData.append('imgtype', 'businessimg')

      e.target.value = ''
      uploadImg(formData).then((res) => {
        if (res.status == '200') {
          commonUtil.notifySuccess('上传成功')
          let url = res.status
          let urlImg = res.statusText
          this.appImg.businessimg = this.httpimgUrl + urlImg + '&original=1'
        }
      })
    },

    handleFile_md: function (e) {
      const $target = e.target
      const file = $target.files[0]
      const reader = new FileReader()
      // reader.onload = (data) => {
      //   const res = data.target
      //   this.userBasicData.avatar = res.result
      // }
      reader.readAsDataURL(file)
      this.headFile = file
      const formData = new FormData()
      formData.append('file', this.headFile)
      formData.append('guestcode', this.userInfo.reguserno)
      formData.append('gscode', this.userInfo.Gscode)
      formData.append('imgtype', 'mdimg')

      e.target.value = ''
      uploadImg(formData).then((res) => {
        if (res.status == '200') {
          commonUtil.notifySuccess('上传成功')
          let url = res.status
          let urlImg = res.statusText
          this.mdfileList.push(this.httpimgUrl + urlImg + '&original=1')
        }
      })
    },
    // 移除门店图片
    delete_mdimg(url) {
      let mdUrl = ''
      var index = this.mdfileList.indexOf(url)
      this.mdfileList.splice(index, 1)
      let guestcode = this.userInfo.reguserno
      let gscode = this.userInfo.Gscode
      this.mdfileList.forEach((element) => {
        mdUrl +=
          element.replace(this.httpimgUrl, '').replace('&original=1', '') + ','
      })
      delmdimgApi({
        guestcode: guestcode,
        gscode: gscode,
        mdimg: mdUrl.slice(0, mdUrl.length - 1)
      }).then((res) => {
        if (res.code == '0') {
          commonUtil.notifySuccess(res.msg)
        }
      })
    },
    //广告图上传
    handleFile_advimg: function (e) {
      const $target = e.target
      const file = $target.files[0]
      const reader = new FileReader()
      // reader.onload = (data) => {
      //   const res = data.target
      //   this.userBasicData.avatar = res.result
      // }
      reader.readAsDataURL(file)
      this.headFile = file
      const formData = new FormData()
      formData.append('file', this.headFile)
      formData.append('guestcode', this.userInfo.reguserno)
      formData.append('gscode', this.userInfo.Gscode)
      formData.append('imgtype', 'advimg')

      e.target.value = ''
      uploadImg(formData).then((res) => {
        if (res.status == '200') {
          commonUtil.notifySuccess('上传成功')
          let url = res.status
          let urlImg = res.statusText
          this.advfileList.push(this.httpimgUrl + urlImg + '&original=1')
        }
      })
    },
    //广告图删除
    delete_advimg(url) {
      let advUrl = ''
      var index = this.advfileList.indexOf(url)
      this.advfileList.splice(index, 1)
      let guestcode = this.userInfo.reguserno
      let gscode = this.userInfo.Gscode
      this.advfileList.forEach((element) => {
        advUrl +=
          element.replace(this.httpimgUrl, '').replace('&original=1', '') + ','
      })
      deladvimgApi({
        guestcode: guestcode,
        gscode: gscode,
        advimg: advUrl.slice(0, advUrl.length - 1)
      }).then((res) => {
        if (res.code == '0') {
          commonUtil.notifySuccess(res.msg)
        }
      })
    },
    // 文本编辑器上传图片
    handleFile_editor: function (e) {
      const $target = e.target
      const file = $target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      this.headFile = file
      const formData = new FormData()
      formData.append('file', this.headFile)
      formData.append('guestcode', this.userInfo.reguserno)
      formData.append('gscode', this.userInfo.Gscode)

      e.target.value = ''
      uploadImg(formData).then((res) => {
        if (res.status == '200') {
          commonUtil.notifySuccess('上传成功')
          let urlImg = res.statusText
          let url = this.httpimgUrl + urlImg + '&original=1'
          let shtml = '<img src="' + url + '"/>'
          this.qeditor = this.qeditor + shtml
        } else {
          commonUtil.notifyError(res.statusText)
        }
      })
    },

    delete_img: function () {
      commonUtil.notifySuccess('修改成功')
    },

    // 解除第三方绑定
    unThirdBind(thirdData) {
      const data = {
        id: thirdData.id,
        userId: 0
      }
      updateThirdOauthUser(data).then((response) => {
        commonUtil.notifySuccess('解绑成功')
        this.buildThirdOauthUserData()
      })
    },
    thirdLogin(iconKey, event) {
      window.open(toOauthLogin(iconKey, '/account/settings'), '_self')
    },
    buildSafeData() {
      const loginUser = this.loginUser
      safeData.email = loginUser.email
      safeData.phone = loginUser.phone
    },
    buildUserBasicData() {
      ///获取赋值
      const loginUser = this.userInfo
      const cardInfo = this.cardInfo
      const userBasicData = this.userBasicData
      const appImg = this.appImg
      userBasicData.email = cardInfo.email
      userBasicData.company = cardInfo.company
      userBasicData.tel = cardInfo.tel
      userBasicData.qq = cardInfo.qq
      userBasicData.business = cardInfo.business

      userBasicData.provinceData.value = cardInfo.province
      userBasicData.cityData.value = cardInfo.city
      userBasicData.countyData.value = cardInfo.district
      userBasicData.address = cardInfo.address
      //userBasicData.logo=cardInfo.logoimg
      this.qeditor = cardInfo.body

      if (appImg.logo === '' || appImg.logo === undefined) {
        this.appImg.logo = 'imgs/head.png'
      } else {
        this.appImg.logo = this.httpimgUrl + this.appImg.logo
      }
      if (this.appImg.appimg === '' || this.appImg.appimg === undefined) {
        this.appImg.appimg = 'imgs/head.png'
      } else {
        this.appImg.appimg = this.httpimgUrl + this.appImg.appimg
      }
      if (
        this.appImg.businessimg === '' ||
        this.appImg.businessimg === undefined
      ) {
        this.appImg.appimg = 'imgs/head.png'
      } else {
        this.appImg.businessimg = this.httpimgUrl + this.appImg.businessimg
      }
      if (this.appImg.storeimg != '' && this.appImg.storeimg != undefined) {
        for (var j = 0; j < this.appImg.storeimg.split(',').length; j++) {
          this.mdfileList.push(
            this.httpimgUrl + this.appImg.storeimg.split(',')[j] + '&original=1'
          )
        }
      }

      if (this.appImg.advimg != '' && this.appImg.advimg != undefined) {
        for (var j = 0; j < this.appImg.advimg.split(',').length; j++) {
          this.advfileList.push(
            this.httpimgUrl + this.appImg.advimg.split(',')[j] + '&original=1'
          )
        }
      }
      if (cardInfo.codeimg_url != '') {
        this.wechatcode = this.httpimgUrl + cardInfo.codeimg_url + '&original=1'
      } else {
        weChat({
          guestcode: loginUser.reguserno,
          gscode: loginUser.Gscode
        }).then((res) => {
          this.wechatcode = res.qrcode
        })
      }
    },
    buildThirdOauthUserData() {
      const data = {
        userId: this.loginUser.id
      }
      Object.keys(this.userBindData).forEach((key) => {
        this.userBindData[key].id = null
        this.userBindData[key].username = null
      })
      listThirdOauthUser(data).then((response) => {
        for (let i = 0; i < response.length; ++i) {
          const res = response[i]
          const source = _.lowerCase(res.source)
          if (this.userBindData[source] && !this.userBindData[source].id) {
            this.userBindData[source].username = res.username
            this.userBindData[source].id = res.id
          }
        }
      })
    },
    buildAreaData() {
      this.listForProvince()
      this.listForCity(this.cardInfo.province)
      this.listForCounty(this.cardInfo.city)
      //this.listForCity(this.loginUser.provinceCode)
      //this.listForCounty(this.loginUser.cityCode)
    },
    listForProvince() {
      //获取省
      getlistForProvince().then((res) => {
        //
        if (res.code == 'ok') {
          this.Province = res.list
          //console.log("listForProvince:"+this.Province)
          this.initAreaData(this.provinces, this.Province)
          this.initAreaData(this.provincesCache, this.Province)
          this.initUserBaseArea(this.userBasicData.provinceData, this.Province)
        }
      })
      // listForProvince().then(datas => {
      //   this.initAreaData(this.provinces, datas)
      //   this.initAreaData(this.provincesCache, datas)
      //   this.initUserBaseArea(this.userBasicData.provinceData, datas)
      // })
    },
    //获取市
    listForCity(provinceCode) {
      //console.log("listForCity:"+ provinceCode)
      getCityList(provinceCode).then((res) => {
        //
        if (res.code == 'ok') {
          this.initAreaData(this.cities, res.list)
          this.initAreaData(this.citiesCache, res.list)
          this.initUserBaseArea(this.userBasicData.cityData, res.list)
        }
      })
    },
    //获取区
    listForCounty(cityCode) {
      // console.log("listForCounty:"+ cityCode)
      getDistrictList(cityCode).then((res) => {
        //
        if (res.code == 'ok') {
          this.initAreaData(this.counties, res.list)
          this.initAreaData(this.countiesCache, res.list)
          this.initUserBaseArea(this.userBasicData.countyData, res.list)
        }
      })
    },
    initUserBaseArea(areaData, datasServer) {
      for (let i = 0; i < datasServer.length; ++i) {
        if (areaData.value === datasServer[i].Code) {
          areaData.label = datasServer[i].Cityname
        }
      }
    },
    initAreaData(datasClient, datasServer) {
      datasClient.splice(0, datasClient.length)
      for (let i = 0; i < datasServer.length; ++i) {
        const data = datasServer[i]
        datasClient.push({
          label: data.Cityname,
          value: data.Code
        })
      }
    },
    deleteProvince() {
      this.userBasicData.provinceData = commonUtil.resetObj(
        this.userBasicData.provinceData
      )
      this.countiesCache = commonUtil.resetArray(this.countiesCache)
      this.counties = commonUtil.resetArray(this.counties)
      this.cities = commonUtil.resetArray(this.cities)
      this.citiesCache = commonUtil.resetArray(this.cities)
      this.userBasicData.cityData = commonUtil.resetObj(
        this.userBasicData.cityData
      )
      this.userBasicData.countyData = commonUtil.resetObj(
        this.userBasicData.countyData
      )
    },
    deleteCity() {
      this.countiesCache = commonUtil.resetArray(this.countiesCache)
      this.counties = commonUtil.resetArray(this.counties)
      this.userBasicData.cityData = commonUtil.resetObj(
        this.userBasicData.cityData
      )
      this.userBasicData.countyData = commonUtil.resetObj(
        this.userBasicData.countyData
      )
    },
    deleteCounty() {
      this.userBasicData.countyData = commonUtil.resetObj(
        this.userBasicData.countyData
      )
    },
    changeProvince() {
      this.listForCity(this.userBasicData.provinceData.value)
      this.countiesCache = commonUtil.resetArray(this.countiesCache)
      this.counties = commonUtil.resetArray(this.counties)
      this.userBasicData.cityData = commonUtil.resetObj(
        this.userBasicData.cityData
      )
      this.userBasicData.countyData = commonUtil.resetObj(
        this.userBasicData.countyData
      )
    },
    changeCity() {
      this.listForCounty(this.userBasicData.cityData.value)
      this.userBasicData.countyData = commonUtil.resetObj(
        this.userBasicData.countyData
      )
    },
    changeCounty() {},
    filterProvinces(val, update) {
      if (val === '' || val === undefined) {
        update(() => {
          this.provinces = this.provincesCache
        })
        return
      }
      update(() => {
        const needle = val.toLowerCase()
        this.provinces = this.provincesCache.filter(
          (v) => v.label.toLowerCase().indexOf(needle) > -1
        )
      })
    },
    filterCities(val, update) {
      if (val === '' || val === undefined) {
        update(() => {
          this.cities = this.citiesCache
        })
        return
      }
      update(() => {
        const needle = val.toLowerCase()
        this.cities = this.citiesCache.filter(
          (v) => v.label.toLowerCase().indexOf(needle) > -1
        )
      })
    },
    filterCounties(val, update) {
      if (val === '' || val === undefined) {
        update(() => {
          this.counties = this.countiesCache
        })
        return
      }
      update(() => {
        const needle = val.toLowerCase()
        this.counties = this.countiesCache.filter(
          (v) => v.label.toLowerCase().indexOf(needle) > -1
        )
      })
    },
    //更新基础信息
    updateUserBaseInfo() {
      const userData = {
        company: this.userBasicData.company,
        tel: this.userBasicData.tel,
        qq: this.userBasicData.qq,
        province: this.userBasicData.provinceData.value,
        city: this.userBasicData.cityData.value,
        area: this.userBasicData.countyData.value,
        address: this.userBasicData.address,
        business: this.userBasicData.business,
        guestcode: this.userInfo.reguserno,
        gscode: this.userInfo.Gscode
      }

      if (userData.company == '') {
        commonUtil.notifyError('公司名称不能为空')
        return
      }
      if (userData.tel == '') {
        commonUtil.notifyError('公司名称不能为空')
        return
      }
      if (userData.qq == '') {
        commonUtil.notifyError('公司QQ不能为空')
        return
      }
      if (userData.address == '') {
        commonUtil.notifyError('详细地址不能为空')
        return
      }
      if (userData.business == '') {
        commonUtil.notifyError('公司主营不能为空')
        return
      }
      this.basicLoading = true
      updataCardInfo(userData).then((res) => {
        if (res.code == '0') {
          commonUtil.notifySuccess('更新成功')
          this.basicLoading = false
        } else {
          commonUtil.notifyError(res.msg)
          this.basicLoading = false
        }
      })
    },
    preUploadFileAndUpdate(userData) {
      // 请求接口前需要传的参数
      const formData = new FormData()
      formData.append('file', this.headFile)
      // 先上传头像 --获取上传的url
      uploadHeadImg(formData).then((result) => {
        userData.avatar = result
        updateUser(userData).then((data) => {
          commonUtil.notifySuccess('更新成功')
          this.basicLoading = false
        })
      })
    },
    //公司简介
    UpdateCardInfobody() {
      const userData = {
        body: this.qeditor,
        guestcode: this.userInfo.reguserno,
        gscode: this.userInfo.Gscode
      }
      this.basicLoading = true
      UpdataCardInfo_body(userData).then((res) => {
        if (res.code == '0') {
          commonUtil.notifySuccess('更新成功')
          this.basicLoading = false
        } else {
          commonUtil.notifyError(res.msg)
          this.basicLoading = false
        }
      })
    }
  },
  created() {
    const user = getLoginData()
    if (user == null) {
      return
    }
    this.userInfo = user
  },
  mounted() {
    let guestcode = this.userInfo.reguserno
    let gscode = this.userInfo.gscode
    iwebApi({
      guestcode: guestcode,
      gscode: gscode
    }).then((response) => {
      if (response.code == '0') {
        this.cardInfo = response
        this.buildUserBasicData()
        this.buildAreaData()
        getAppImg({
          guestcode: guestcode,
          gscode: gscode
        }).then((res) => {
          if (res.code == '0') {
            this.appImg = res
            this.buildUserBasicData()
            this.buildAreaData()
          } else {
          }
        })
      } else {
        commonUtil.notifyError('获取卡片信息失败，请重新登录')
        return
      }
    })
  },
  computed: {
    passwordValida: function () {
      return (
        this.userUpdatePasswordData.data.newPassword ===
        this.userUpdatePasswordData.data.newConfirmPassword
      )
    }
  }
}
</script>

<style scoped>
@import 'http://at.alicdn.com/t/font_2136554_eo99fwwjrkv.css';
.q-pb-sm {
  width: 100%;
  padding: 0 100px;
  margin-bottom: 20px;
}
::v-deep .q-tabs__content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 1px 1px 1px 1px #ccc;
}
::v-deep .q-pl-md {
  padding-left: 0;
}
.q-tab-panel {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.boxc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.text_name {
  width: 60px;
  text-align: left;
  color: #333;
  font-size: 14px;
}
.inputwidth {
  width: 80%;
  justify-content: center;
}
.gxbtn {
  text-align: center;
}
.title_name {
  text-align: center;
}
.column {
  flex-direction: column;
}
.flexs {
  width: 100% !important;
  display: flex;
  justify-content: space-around;
  padding-top: 12px;
}
.q-card {
  background-color: transparent !important;
}

.q-card__section {
  background-color: inherit !important;
}
::v-deep .q-card__section--vert{
  padding: 0;
}
::v-deep .q-tab-panels{
  background-color: rgba(0, 0, 0, 0) !important;
}
::v-deep.q-tab-panel{
  padding: 0 !important;
}
::v-deep .q-pt-none{
  background-color: #fff;
}
</style>
